<template>
  <div class="mainBox">
    <div class="btnBox">
      <div class="btnOne">
        <el-select
          v-model="value"
          clearable
          placeholder="Select"
          class="marginRight"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          size="small"
          v-model="input"
          placeholder="会员名称/会员卡/手机号"
          class="marginRight"
        />
        <el-button type="primary">查询</el-button>
      </div>
      <el-button @click="SetupMembershipCard">设置会员卡</el-button>
    </div>
    <div class="tableBox">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="Date" width="130" />
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="date" label="Date" width="180" />

        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="操作">
          <template #default>
            <el-button link type="primary" size="small" @click="toViewBtn"
              >查看</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="dialogFormVisible = true"
              >续费</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="dialogFormVisibleTwo = true"
              >扣费</el-button
            >
            <el-button link type="primary" size="small" @click="stopBtn"
              >停用</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 续费模态框 -->
    <div>
      <el-dialog v-model="dialogFormVisible" title="续费">
        <el-form :model="form">
          <el-form-item label="续费次数" :label-width="formLabelWidth">
            <el-input
              style="width: 300px"
              v-model="form.name"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="续费场馆" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="Please select a zone">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="支付方式" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="Please select a zone">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">Cancel</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">
              Confirm
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 扣费 -->
    <div>
      <el-dialog v-model="dialogFormVisibleTwo" title="续费">
        <el-form :model="form">
          <el-form-item label="扣费金额" :label-width="formLabelWidth">
            <el-input
              style="width: 300px"
              v-model="form.name"
              autocomplete="off"
            />
          </el-form-item>

          <el-form-item
            label="备注"
            :label-width="formLabelWidth"
            style="width: 600px"
          >
            <el-input type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisibleTwo = false">保存</el-button>
            <el-button type="primary" @click="dialogFormVisibleTwo = false">
              取消
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import router from "../../router";
const formLabelWidth = "140px";
const dialogFormVisible = ref(false);
const dialogFormVisibleTwo = ref(false);
const value = ref("");
const input = ref("");
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
const SetupMembershipCard: any = function () {
  router.push("/mainView/MembershipCard/shipcardTwoBox");
};
const renewal: any = function () {};
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const gridData = [
  {
    date: "2016-05-02",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-04",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-01",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-03",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
];
//停用
const stopBtn: any = function () {
  ElMessageBox.confirm("确定停用此会员卡吗?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "停用成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消停用",
      });
    });
};
//查看
const toViewBtn: any = function () {
  router.push("/mainView/MembershipCard/shipcardTwoBox/listcoachesDetail");
};
</script>

<style scoped>
.mainBox {
  width: 100%;
  padding: 15px 20px;
  box-sizing: border-box;
  background-color: #fff;
}
.btnBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.btnOne {
  display: flex;
}
.marginRight {
  margin-right: 15px;
}
.tableBox {
  width: 100%;
  margin-top: 20px;
}
</style>
